<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>支付页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/us/URL.js"></script>
		<style type="text/css">
			#alipay{background-color: #35d0c9 !important;color: #fff !important;border: none !important;padding: 10px;text-align: center;margin-bottom: 4px;}
			#wxpay{background-color: #35d0c9 !important;color: #fff !important;border: none !important;padding: 10px;text-align: center;}
			#total{background-color: transparent !important;border: none !important;border-bottom: solid 1px #35d0c9 !important;text-align: center !important;margin-bottom: 0px !important;}
			div#dcontent{background-color: #fff;position: fixed;bottom: 0px;z-index: 9999;width: 100%;display: none;} 
			span.xinxi{margin-left: 10px;}
			dt{padding-top: 10px;padding-bottom: 10px;border-bottom: dashed 1px #ccc;}
		</style>
		<script type="text/javascript">
			var price ;
			var orders;
			var title;
			var addtime;
			
			window.addEventListener('zhifuMsg', function(event) {
				mui.plusReady(function() {
					//1.初始化变量
					price = event.detail.price;
					orders = event.detail.orders;
					title = event.detail.title;
					addtime = event.detail.addtime;
			
					//2.初始化视图
			
					document.getElementById("totalPrice").innerText=price;
					document.getElementById("total").value=price;
//					plus.storage.setItem("price",price);
					
					//产品信息
					document.getElementById("designation").innerText=title;
//					plus.storage.setItem("title",title);
					
//					alert(document.getElementById("total").value);
					//出发时间
//					addtime=event.detail.addtime;
					document.getElementById("time").innerText=addtime;
//					plus.storage.setItem("addtime",addtime);
					//订单编号
					document.getElementById("orderID").innerText=orders;
//					alert("ss"+);
//					plus.storage.setItem("orders",event.detail.orders);
						
				});

			}, false);	
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">在线支付</h1>
		</header>
		<div class="mui-content">
		    <div class="mui-card">
				<div class="mui-card-header mui-card-media">
						<p style="margin-bottom: 0px;font-size: 16px;color: #323232;">订单总额:￥<span id="totalPrice" style="color: orangered;font-weight: bolder;">222222</span>元</p>
				</div>
				<div class="mui-card-content" >
					<!--<img src="../images/yuantiao.jpg" alt="" width="100%"/>-->
					<dl style="padding-left: 10px;padding-right: 10px;">
						<dt style="padding-top: 0px;">订单号<i style="font-style: normal;visibility: hidden;">音</i>:<span id="orderID" class="xinxi">05049747911146</span></dt>
						<dt>产品名称:<span id="designation" class="xinxi">兵马俑一日游（测试）(兵马俑门票)</span></dt>
						<!--<dt>产品编号:<span id=" productID" class="xinxi">151</span></dt>-->
						<dt style="padding-bottom: 0px;border-bottom: none !important;">购买时间:<span id="time" class="xinxi">2017年07月22日 14:29:36</span></dt>
					</dl>
				</div>
				<div class="mui-card-footer" style="padding: 0px;">
					<a class="mui-card-link" href="#dcontent" style="display: inline-block;width: 100%;background-color: #35d0c9;color: #fff;text-align: center;border-radius: 5px;font-size: 18px;">立即支付</a>
				</div>
			</div>
		</div>
		<div id="dcontent" class="dcontent mui-popover mui-popover-action">
			<p style="text-align: center;font-size: 18px;padding: 5px;color: #35D0C9;">应付金额：</p>
			<div style="padding: 0 1em;text-align:left">
				<input id="total" type="number" value="1"  style="width: 80%;" disabled="disabled"/> 元
			</div>
			<br/>
		</div>
		
		
	</body>

</html>
<script type="text/javascript">
	var pays={};
function plusReady(){
	// 获取支付通道
	plus.payment.getChannels(function(channels){
		var content=document.getElementById('dcontent');
		var info=document.getElementById('info');
		var txt='支付通道信息：';
		for(var i in channels){
			var channel=channels[i];
			if(channel.id=='qhpay'||channel.id=='qihoo'){	// 过滤掉不支持的支付通道：暂不支持360相关支付
				continue;
			}
			pays[channel.id]=channel;
			txt += 'id:'+channel.id+', ';
			txt += 'description:'+channel.description+', ';
			txt += 'serviceReady:'+channel.serviceReady+'； ';
			var de=document.createElement('div');
			de.setAttribute('class', 'button');
			de.setAttribute('onclick', 'pay(this.id)');
			de.id=channel.id;
			de.innerText=channel.description+'支付';
			content.appendChild(de);
			checkServices(channel);
		}
		info.innerText=txt;
	},function(e){
	});
}
	document.addEventListener('plusready', plusReady, false);
// 检测是否安装支付服务
	function checkServices(pc){
		if(!pc.serviceReady){
			var txt=null;
			switch(pc.id){
				case 'alipay':
				txt='检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
				break;
				default:
				txt='系统未安装“'+pc.description+'”服务，无法完成支付，是否立即安装？';
				break;
			}
			plus.nativeUI.confirm(txt, function(e){
				if(e.index==0){
					pc.installService();
				}
			}, pc.description);
		}
	}

	var w=null;
//	var PAYSERVER='http://demo.dcloud.net.cn/payment/?payid=';
//	var PAYSERVER='http://192.168.0.167/app/api/alipay';
	var PAYSERVER=pageUrl.alipay;
// 支付
	function pay(id){
		if(w){return;}//检查是否请求订单中
		var url=PAYSERVER;
		if(id=='alipay'||id=='wxpay'){
//			url+=id;
			url;
		}else{
			plus.nativeUI.alert('当前环境不支持此支付通道！', null, '支付');
			return;
		}
		var appid=plus.runtime.appid;
		if(navigator.userAgent.indexOf('StreamApp')>=0){
			appid='Stream';
		}
		url += '?ordersn='+orders+'&title='+title+'&addtime='+addtime+'&price='+price;
		w=plus.nativeUI.showWaiting();
		// 请求支付订单
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			switch(xhr.readyState){
				case 4:
				w.close();w=null;
				if(xhr.status==200){
					var order=xhr.responseText;
					plus.payment.request(pays[id],order,function(result){
						plus.nativeUI.alert('支付成功：感谢你的支持，我们会继续努力完善产品。',function(){
							back();
						},'支付成功');
					},function(e){
//						plus.nativeUI.alert('支付失败', null, '支付失败：'+e.code);
						mui.toast("已取消支付");
					});
				}
				else{
					mui.toast('获取订单信息失败！', null, '支付');
					
				}
				break;
				default:
				break;
			}
		}
		xhr.open('GET',url);
		xhr.send();
	}
	
	
			</script>